<template>
<!-- 发起缴费弹框 -->
  <!-- <div>发起缴费</div> -->
  <el-dialog class="dues_dialog"
  :visible.sync="visible" 
  title="发起缴费"
  @close="cancel"
  :close-on-click-modal="false" 
  :close-on-press-escape="false"
  :append-to-body="true"
  >
  <el-form :model="Payment" label-width="80px">
      <el-form-item label="主题">
          <el-input v-model="Payment.theme"></el-input>
      </el-form-item>
      <el-form-item label="缴纳时间">
            <div class="block">
                <el-date-picker
                v-model="Payment.feeStartTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="缴纳时间">
                </el-date-picker>
            </div>
      </el-form-item>
      <el-form-item label="截止时间">
            <div class="block">
                <el-date-picker
                v-model="Payment.feeEndTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="截止时间">
                </el-date-picker>
            </div>
      </el-form-item>
      <el-form-item label="费用">
          <el-input v-model="Payment.cost"></el-input>
      </el-form-item>
      <el-form-item label="缴纳人">
          <div class="block">
            <!-- <span class="demonstration">折叠展示Tag</span> -->
            <el-cascader
                :options="uislist"
                collapse-tags
                :props="props"
                clearable 
                v-model="userIdListId"></el-cascader>
            </div>
          <!-- <el-input v-model="Payment.userIdList"></el-input> -->
      </el-form-item>
  </el-form>
  <div class="button">
    <el-button type="primary" @click="initiate">提交</el-button>
    <el-button @click="cancel">取消</el-button>
  </div>
  </el-dialog>

</template>

<script>
// import axios from "axios"
export default {
    data(){
        return{
            visible:false,
            Payment:{
                theme:"",//主题
                feeStartTime:"",//缴纳时间
                feeEndTime:"",//截止时间
                cost:"",//费用
                userIdList:[],//缴纳人
            },
            userIdListId:"",//选择的缴纳人id包含党组织id的数组
            props: { multiple: true },
            uislist:[]//缴纳人list
        }
    },
    mounted(){
    },
    methods:{
        init () {
            this.visible = true
            this.$nextTick(() => {
                // this.$refs['dataForm'].resetFields()
            })
            this.payerList()
        },
        cancel(){//点击取消按钮
            this.visible = false
            this.Payment = {}
        },
        payerList(){//用户信息树状图
            this.axios({
                headers:{'Authentication':localStorage.getItem('token')},
                method:"get",
                url:"/user/getUserTree",
            }).then(res=>{
                if(res.data.code != 20001){
                    return this.$message.error(res.data.msg)
                }
                this.uislist = res.data.data
            })
        },
        initiate(){//点击确认按钮
            // console.log(this.Payment)
            // this.Payment.userIdList.push(this.userIdListId[this.userIdListId.length - 1])
            // console.log(this.userIdListId)
            for(var i=0;i<this.userIdListId.length;i++){
                // console.log(this.userIdListId[i][this.userIdListId[i].length-1])
               this.Payment.userIdList.push(this.userIdListId[i][this.userIdListId[i].length-1])
            }
            // console.log(this.Payment.userIdList)
            this.axios({
                headers:{'Authentication':localStorage.getItem('token')},
                method:"post",
                // url:"api/fee/save",
                url:"/fee/save",
                data:this.Payment
            }).then(res=>{
                // console.log(res)
                if(res.data.code != 20001){
                    return this.$message.error(res.data.msg)
                }
                this.$alert('发起成功', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.visible = false
                        this.Payment={}
                        this.$emit('membershipList','Arrears')
                    }
                });
            })
        }
    }
}
</script>

<style lang="scss">
    .dues_dialog{
        .el-dialog{
            height: 78vh;
        }
        .button{
            position: absolute;
            bottom: 5vh;
            left: 0;
            width: 100%;
            text-align: center;
        }
    }
</style>